import styled from "styled-components";
import border from "../styled/border"
const ButtonStyle = border(
    styled.button`
border-radius: .08rem;
border-width: ${props => !props.plain ? "0" : '1px'};
width: ${props => {
            if (props.size === 'large') return '80%';
            else if (props.size === 'small') return '1.5rem';
            else if (props.size==='m-mini') return '.32rem'
            else return '1rem'
        }};
height: ${props => {
    if(props.size==='m-mini') return '.16rem';

    return  props.size === 'mini' ? '.4rem' : '.45rem'
}};
background-color: ${props => !props.plain ? "#2984F8":'#fff'};
color: ${props => props.plain ? "#2984F8" : '#fff'};
${props => props.color ? 'color:' + props.color + ';' : ''}
${props => props.bgColor ? 'background-color:'+props.bgColor+';':''}
${props => props.strong ? 'font-weight: 600;' : ''}
border-color:#ccc ;
box-shadow: none;
${props => props.size === 'large' ? 'margin : 0 auto;display:block;' : ''}
font-size:${props => props.size === 'mini' ? '.16rem' : '.18rem'} ;
`

)

export {
    ButtonStyle
}